<template>
	<section>
		<div class="now-join-contain">
			<ul class="bg-white fs28rem border-b20">
				<li class="pt30rem pb30rem pl30rem pr30rem border-b layout flex-left">
					<label>
						联系人：
					</label>
					<input type="text" placeholder="请输入您的姓名" v-model="form.contacts">
				</li>
				<li class="pt30rem pb30rem pl30rem pr30rem border-b layout">
					<div class="layout flex-left">
						<label>
							验证码：
						</label>
						<input type="text" placeholder="请输入您收到的验证码" v-model="form.captcha">
					</div>					
					<button class="coptcha red pl20rem pr20rem pt10rem pb10rem fs26rem" @click="sendCaptcha">
						<template v-if="sending">重新发送({{ minute }}s)</template>
						<template v-else >获取验证码</template>
					</button>
				</li>				
			</ul>
			<ul class="bg-white fs28rem">
				<li class="pt30rem pb30rem pl30rem pr30rem border-b layout flex-left">
					<label>
						公司名称：
					</label>
					<input type="text" placeholder="请输入您的公司名称" v-model="form.company_name">
				</li>
				<li class="pt30rem pb30rem pl30rem pr30rem border-b layout flex-left">
					<label>
						商标名称：
					</label>
					<input type="text" placeholder="请输入您的商标名称" v-model="form.shangbiao_name">
				</li>
				<li class="pt30rem pb30rem pl30rem pr30rem border-b layout flex-left">
					<label>
						电话号码：
					</label>
					<input type="text" placeholder="请输入您的电话号码" v-model="form.mobile">
				</li>
				<li class="pt30rem pb30rem pl30rem pr30rem border-b layout" @click="popupVisible = true">
					<div class="layout flex-left">
						<label>
							所属行业:
						</label>
						<input type="text" placeholder="请输入您所属的行业" v-model="industry_obj.content">
					</div>
					<i class="iconfont icon-right2 fs20rem color999"></i>					
				</li>				
				<li class="pt30rem pb30rem pl30rem pr30rem border-b layout" @click="openPicker">
					<div class="layout flex-left">
						<span class="mr20rem">
							预计上新时间：
						</span>
						<span>
							{{form.pushtime}}
						</span>
					</div>
					<i class="iconfont icon-right2 fs20rem color999"></i>					
				</li>
			</ul>						
			<!-- <router-link to="businessIn/NowJoin"> -->
				<!-- <div class="fixed flex bg-transparent">
					<button @click="submit" class="mt20rem mr30rem ml30rem mb20rem btn cxo-red radius align-center fs30rem white flex_1">
						提交资料
					</button>				
				</div> -->
				<button class="fixed pt20rem pb20rem circle-8 cxo-red align-center fs30rem white auto block mb30rem" style="width:92%" :class="{ bottom5: showApp }">
					提交资料
				</button>	
			<!-- </router-link> -->
			<popup v-model="popupVisible"  position="bottom"> 
				<picker :slots="slots" @change="onValuesChange" value-key="content"></picker>
			</popup>
			<datetime-picker
			  ref="picker"
			  v-model="timeValue"
			  type="date"
			  @confirm="handleConfirm" >
			</datetime-picker>
		</div>
	</section>
</template>

<script>
	import { getCaptcha, storeEntry, industryList } from "@/api/store";
	import { Popup, Picker, DatetimePicker } from 'mint-ui';
	import { formatDate } from "@/utils/index";
	import $toast from '@/utils/toast'

	export default{
		components: {
			Picker,
			Popup,
			DatetimePicker
		},	   
		data()
		{
		    return{
		    	form:{
		    		uid           : localStorage.getItem('uid'),
		    		contacts	  : '',
		    		captcha		  : '',
		    		company_name  : '',
		    		shangbiao_name: '',
		    		mobile		  : '',
		    		industry	  : '',
		    		pushtime      : '',
		    		phone		  : localStorage.getItem('mobile')
		    	},
		    	showApp : window.sessionStorage.getItem('isapp'),
		    	industry_obj: '',
		    	minute: 60,
		    	sending: false,
		    	industry_list: [],
		    	timeValue: new Date(),
		    	popupVisible: false,
				slots: [
			        {
			          flex: 1,
			          values: [{id: '',content: ''}],
			          className: 'slot1',
			          textAlign: 'center'
			        }
			     ]
            }
		},
		methods:{
			openPicker()
			{
				this.$refs.picker.open();
			},
			sendCaptcha()
			{
				if(this.sending)
					return;

				getCaptcha(this.form.uid, this.form.phone).then( res => {
					this.countDown();
				})
			},
			countDown() 
			{ 
				this.sending = true;

				var itv = setInterval(()=>{
					if(this.minute > 0){
						--this.minute
					}
					else{
						clearInterval(itv);
						this.sending = false;
						this.minute = 60;
					}
				},1000)
			},
			onValuesChange(picker, values)
			{
			     picker.setSlotValue(1, values[0]);
			     this.industry_obj = values[0];
			},
			submit()
			{
				this.form.industry = this.industry_obj.id;
				storeEntry(this.form).then( res => {
					$toast("提交资料成功");
					this.$router.replace('/member/businessIn/NowJoin')
				})
			},
			handleConfirm()
    		{
    			this.form.pushtime = formatDate(this.timeValue, "yyyy-MM-dd");
    		},
		},
		created()
		{
			let that = this
			industryList().then( res => {
				that.industry_list = res.data ;
				that.slots[0].values =  that.industry_list; 
			});
		}
	}
</script>

<style lang="less">
	.now-join-contain{
		min-height: 1334/28rem;
		background-color: #f5f5f5;
		.mint-popup{
			width: 100%;
		}
		label{
			display: inline-block;
			width: 170/28rem;
		}
		input{ 
			width: 300/28rem;
			border: 1px solid transparent;
		}
		.bg-transparent{
			background-color: transparent;
		}	
		.bottom5{
			bottom:5rem;
		}	
	}
</style>

